<template>
<div class="model-features">
    <title-bar title="各类占比分析"></title-bar>
    <ve-pie :data-empty="chartData.rows.length===0" :legend-visible="true" width="100%" height="400px" :data="chartData" :extend="extend"></ve-pie>
</div>
</template>

<script>
import TitleBar from '@/components/TitleBar'
import {
    mapGetters
} from 'vuex'
export default {
    name: 'PieChart',
    components: {
        TitleBar
    },
    computed: {
        ...mapGetters({
            modelDetail: 'common/getModelDetail'
        })
    },
    data () {
        return {
            extend: {
                grid: {
                    y: 30,
                    left: '100px',
                    right: '100px'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}<br/>样本数: {c}<br/>占比：{d}%'
                }
            },
            chartData: {
                columns: [],
                rows: []
            }
        }
    },
    created () {
        this.init()
    },
    methods: {
        init () {
            let rows = this.modelDetail.summary.evaSummary.clustersSample
            rows.forEach(item => {
                item.prediction = `${item.prediction}`
            })
            this.chartData = {
                columns: ['prediction', 'samples'],
                rows
            }
        }
    }
}
</script>
